<template>
  <div class="content">
    <van-nav-bar title="手术事件上报单" left-arrow @click-left="onClickLeft" />
    <div class="form-content">
      <div class="form-title">
        事件明细
      </div>
      <div class="form-main-content">
        <form-create-mobile
          :rule="rule"
          :api="api"
          v-model="formData"
          :value.sync="formData"
          :option="options"
        />
      </div>
    </div>
    <div class="form-content">
      <div class="form-title">
        患者资料
      </div>
      <div class="form-main-content">
        <van-form @submit="() => {}">
          <van-field
            v-model="form.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="form.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-form>
      </div>
    </div>
    <div class="form-content">
      <div class="form-title">
        事件基本信息
      </div>
      <div class="form-main-content">
        <van-form @submit="() => {}">
          <van-field
            v-model="form.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="form.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-form>
      </div>
    </div>
    <div class="form-content">
      <div class="form-title">
        当事人资料
      </div>
      <div class="form-main-content">
        <van-form @submit="() => {}">
          <van-field
            v-model="form.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="form.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-form>
      </div>
    </div>
    <div class="form-content">
      <div class="form-title">
        事件结果
      </div>
      <div class="form-main-content">
        <van-form @submit="() => {}">
          <van-field
            v-model="form.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="form.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-form>
      </div>
    </div>
    <div class="form-content">
      <div class="form-title">
        报告者信息
      </div>
      <div class="form-main-content">
        <van-form @submit="() => {}">
          <van-field
            v-model="form.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="form.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-form>
      </div>
    </div>
    <div class="bottom-btn">
      <div style="width: 40%;margin-left: 24px;">
        <van-button type="info" style="width: 100%;" plain>保存草稿</van-button>
      </div>
      <div style="width: 40%;margin-right: 24px;">
        <van-button type="info" style="width: 100%;">上报</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getReportForm } from "@/api/report";
export default {
  data() {
    return {
      data: {},
      form: "",
      api: {},
      formData: {},
      reportData: {},
      options: {},
      rule: [],
    };
  },
  activated() {
    this.getForm();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //根据表单配置id获取表单
    getForm() {
      this.reportData = this.$store.getters.reportData;
      getReportForm(this.reportData).then((res) => {
        const details = res.data.details || {};
        const options = JSON.parse(details.options);
        const rules = JSON.parse(details.rules);
        console.log(options, "options");
        console.log(rules, "rules");
        this.options = options;
        this.rule = rules;
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .van-nav-bar .van-icon {
  color: #bbb;
}
.content {
  padding-bottom: 200px;
  background-color: #f3f4f6;

  .form-content {
    padding: 12px;

    .form-title {
      color: #2979ff;
      font-size: 16px;
      margin-bottom: 24px;
    }

    .form-main-content {
      background-color: #fff;
      padding: 0 12px;
      border-radius: 8px;
    }
  }

  .bottom-btn {
    position: fixed;
    bottom: 24px;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}
</style>
